<template>
  <div>
    <!-- <div class="inputM">
      <div class="text">输入金额</div>
      <el-input v-model="inputM" placeholder="请输入金额" class="in" type="number"></el-input>
    </div>

    <div class="inputM">
      <div class="text">备注</div>
      <el-input v-model="inputB" placeholder="备注" class="in"></el-input>
    </div>
    <el-button @click="updataM()">记账</el-button>
    <br>
    <br>
    <br>
    <br>

    <div class="inputM">
      <div class="text">输入组名</div>
      <el-input v-model="group_Na" placeholder="请输入组名" class="in" type="text"></el-input>
    </div>
    <el-button @click="group_N()">创建</el-button>

    <br>
    <br>
    <br>
    <div class="inputM">
      <div class="text">添加组员</div>
      <el-input v-model="group_other" placeholder="请输入组员" class="in" type="text"></el-input>
    </div>
    <el-button class="btn" @click="group_otherN()">添加</el-button>

    <el-table :data="tableData1" stripe style="width: 100%">
      <el-table-column prop="group_Na" label="组名" width="180"></el-table-column>
      <el-table-column prop="group_other1" label="组员1" width="180"></el-table-column>
      <el-table-column prop="group_other2" label="组员2" width="180"></el-table-column>
    </el-table>
    <br>
    <br>
    <br>
    <br>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="记账人" width="180"></el-table-column>
      <el-table-column prop="money" label="金额" width="180"></el-table-column>
      <el-table-column prop="remarks" label="备注" width></el-table-column>
    </el-table> -->

    <mf @query="strat" :datas="datas">
      <template slot="lastBtn">
        <el-button size="mini" type="primary" @click="edit(null)">新增分组</el-button>
      </template>
      <template slot="oper" slot-scope="scope">
        <el-button size="mini" type="text" @click="edit(scope.value)">编辑</el-button>
        <el-button size="mini" type="text" @click="remove(scope.value)">删除</el-button>
      </template>
    </mf>

    <button @click="test">test</button>
  </div>
</template>

<script>
import requests from "@/https.js";
export default {
  components: {
  },
  data() {
    return {
      datas: {
        params: {
          page: 1,
          size: 20
        },
        table: {
          //   selection: true,
          loading: false
        },
        resData: {
          rows: [],
          size: 20,
          page: 1,
          recordsTotal: 0
        },
        filterList: [
          {
            type: "input",
            prop: "groupName",
            conditionshow: true,
            filedShow: true,
            label: "组名",
            placeholder: "组名"
          },
          {
            type: "input",
            prop: "sex",
            conditionshow: true,
            filedShow: true,
            label: "人数",
            placeholder: "人数"
          },
          {
            type: "input",
            prop: "phone",
            conditionshow: false,
            filedShow: true,
            label: "是否为默认组",
            placeholder: "是否为默认组"
          },
          {
            type: "input",
            prop: "oper",
            conditionshow: false,
            filedShow: true,
            isSearchHide: true,
            slot: true,
            label: "操作",
            placeholder: "操作"
          }
        ]
      },
      //输入数据
      inputM: "",
      inputB: "",

      //组名，组员
      group_Na: "",
      group_other: "",

      tableData1: [
        {
          group_other1: "a",
          group_other2: "b"
        }
      ],

      //显示数据
      tableData: [
        {
          // date: '',
          // name: '',
          // money: '',
          // remarks:''
        }
      ]
    };
  },

  mounted() {
    // this.strat()
  },

  methods: {
    strat() {
      this.tableData = [];
      requests.get("/api/charge").then(res => {
        this.tableData = res.data.data;
      });

      requests.get("/api/charge/group").then(res => {
        console.log("ooo", res.data);
          this.datas.resData.rows = res.data.data
      });
    },
    edit(row){

    },
    remove(row){
        requests.post("/api/charge", {'key':'removegroup',data:{'id':row.groupId}}).then(res => {
                console.log("xjh", res);
                if(res.data.code ===0){
                    this.strat()
                }
        });  

    },
    

    updataM() {
      var params = {
        key: "add",
        data: { money: this.inputM, remarks: this.inputB }
      };
      requests.post("/api/charge", params).then(res => {
        this.tableData.push(res.data.data[0]);
      });
    },
    group_N() {
      var params = { key: "group", data: { value: this.group_Na } };
      console.log("xjh", params);
      requests.post("/api/charge", params).then(res => {
        this.tableData1.push(res.data.data[0]);
        console.log(res.data.data[0]);
      });
    },
    group_otherN() {
      var params = {
        key: "insertgroup",
        data: { id: 2, value: this.group_other }
      };
      console.log("xjh", params);
      requests.post("/api/charge", params).then(res => {
        this.tableData1.push(res.data.data[0]);
        console.log(res.data.data[0]);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.inputM {
  width: 100%;
  float: left;
  margin-top: 5px;
}
.inputM .text {
  width: 200px;
  float: left;
  border: 5px whitesmoke solid;
  background-color: whitesmoke;
  text-align: center;
  height: 35px;
  line-height: 35x;
}
.inputM .in {
  float: left;
  width: 300px;
}
</style>
